/**
 * 地图展示
 * @name center-map
 */
Vue.component('center-map', {
    template: `
        <div class="center-map" id="map-container">
            <div class="terminal-select">
                <el-checkbox :indeterminate="terminalData.isIndeterminate" v-model="terminalData.checkAll" @change="handleCheckAllChange">全部</el-checkbox>
                <el-checkbox-group v-model="terminalData.checked" @change="handleCheckedCitiesChange">
                    <el-checkbox v-for="item in terminalData.options" :label="item.type" :key="item.type">
                            <div class="icon">
                                <img :src="item.icon" alt="">
                            </div>
                            <span style="margin-left:0.02rem">{{item.label}}</span>
                    </el-checkbox>
                </el-checkbox-group>    
            </div>
            
            <div class="device-status-legend">
                <div class="legend-item" v-for="item of legend_status">
                    <div class="icon" :style="{background:item.color}"></div>
                    <div class="title">{{item.label}}</div>
                </div>
            </div>
            
            <div class="other-group-legend">
                <el-checkbox  v-model="landData.showLandName" @change="landNameShowChange"><span>地块名</span> </el-checkbox>
                <el-checkbox  v-model="terminalData.showTerminalName"><span>设备名</span></el-checkbox>
            </div>
            

            <dp-mark-dialog :visible.sync="markerData.visible" :param="markerData.params"></dp-mark-dialog>
            
            <el-dialog class="dp-mark-dialog__wrapper" custom-class="dp-mark-dialog" title="监控详情" append-to-body :visible.sync="visible">
                <div style="width:9.6rem;height:6rem">
                    <iframe :src="item.url" frameborder="0"  allowfullscreen style="width:100%;height:100%"></iframe>
                </div>
            </el-dialog>  
            
        </div>       
    `,
    props: {
        station_id: {
            type: [String, Number]
        },
        latitude: {
            type: [String, Number],
            default: '28.899515'
        },
        longitude: {
            type: [String, Number],
            default: '120.320402'
        },
        // 基地类型
        station_type: {
            type: [String, Number]
        }
    },
    data() {
        return {
            // 种植相关数据
            landBlockData: {
                checked: [1, 2, 3, 4],
                options: [
                    {label: '万亩方', value: 1, color: 'rgba(42,112,255,0.8)'},
                    {label: '带动区', value: 2, color: 'rgba(0,234,255,0.8)'},
                    {label: '核心区', value: 3, color: 'rgba(0,255,150,0.8)'},
                    {label: '示范区', value: 4, color: 'rgba(22,136,0,0.8)'},
                ],
                valueMap: {
                    1: ['1-1'],
                    2: ['2-3'],
                    3: ['1-2', '2-2'],
                    4: ['2-1']
                }
            },

            // 种植相关数据
            plantData: {
                checked: [1, 2, 3, 4],
                options: [
                    {label: '准备中', value: 1, color: 'rgba(255,240,0,0.8)'},
                    {label: '栽种中', value: 2, color: 'rgba(255,138,0,0.8)'},
                    {label: '采收中', value: 3, color: 'rgba(221,103,255,0.8)'},
                    {label: '已结束', value: 4, color: 'rgba(255,169,169,0.8)'},
                ]
            },

            mapData: {
                map: null,
                loading: false,
                regionMap: {},
            },

            markerData: {
                visible: false,
                params: {},
            },

            // 地块相关数据
            landData: {
                list: [],
                showLandName: true,
            },

            // 终端相关数据
            terminalData: {
                list: [], // 终端列表
                showTerminalName: true,
                checkAll: true,
                checked: ['QXZ', 'SQ', 'JK', 'CQ', 'SCD', 'DMYG', 'NJ'],
                options: [
                    {label: '割草机', icon: './img/term-icon-1.png', type: 'QXZ'},
                    {label: '铲车', icon: './img/term-icon-2.png', type: 'SQ'},
                    {label: '插秧机', icon: './img/term-icon-3.png', type: 'JK'},
                    {label: '作业人员', icon: './img/term-icon-4.png', type: 'CQ'},
                ],
                isIndeterminate: false,
            },

            // 选中的selectMarker
            selectMarker: null,
            markerzIndex: 12,
            visible: false,
            item: {},
            downStatus: false,
        };
    },
    computed: {
        /*选中的终端类型列表*/
        checkedTerminalTypes() {
            let terminalTypes = [];
            this.terminalData.checked.forEach(item => {
                if (TERMINAL && TERMINAL[item]) {
                    terminalTypes = terminalTypes.concat(TERMINAL[item])
                }
            })
            return terminalTypes
        },

        /**
         * 地图图层数组
         */
        curMapLayer() {
            const KEY = "4caf91d8465b13654a44b4f71c35e7e0";
            let xyzTileLayer = new AMap.TileLayer({ //天地图底图图块取图地址
                getTileUrl: `https://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=${KEY}&x=[x]&y=[y]&l=[z]`,
                zIndex: 6
            });
            let wordTileLayer = new AMap.TileLayer({    //天地图文字标注图块取图地址
                getTileUrl: `https://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cia_w&tk=${KEY}&x=[x]&y=[y]&l=[z]`,
                zIndex: 7
            });
            return [xyzTileLayer, wordTileLayer];
        },
    },
    watch: {
        station_id: {
            handler(id) {
                if (id) {
                    this.initMap();
                    this.getLandsByStationId();
                    this.getMarkerList();
                }
            },
            immediate: true,
        },

        /*监听终端选择列表的变化*/
        'terminalData.checked': {
            handler(list) {
                // 1.获取所有终端设备并隐藏
                const markerAll = this.mapData.map.getAllOverlays('marker');
                const markerTerminalAll = markerAll.filter(marker => {
                    const {groupType} = marker.getExtData();
                    if (groupType === '终端') {
                        marker.hide();
                        return true;
                    }
                });

                // 2.开启选中的设备
                list.forEach(item => {
                    markerTerminalAll.forEach(marker => {
                        const {type, groupType, terminalType} = marker.getExtData();
                        if (this.checkedTerminalTypes.includes(terminalType)) {
                            if (this.terminalData.showTerminalName) {
                                marker.show();
                            } else {
                                type === '终端图标' && marker.show();
                            }
                        }
                    })
                })
            },
            deep: true
        },

        /*监听终端名称选择的变化*/
        'terminalData.showTerminalName': {
            handler(bool) {
                const markerArray = this.mapData.map.getAllOverlays('marker');
                markerArray.forEach((marker) => {
                    const {type, terminalType} = marker.getExtData();
                    if (type === '终端名称') {
                        if (bool && this.checkedTerminalTypes.includes(terminalType)) {
                            marker.show();
                        } else {
                            marker.hide();
                        }
                    }
                })
            }
        }
    },

    methods: {
        /**
         * 点击图例中的全部
         * @param val
         */
        handleCheckAllChange(val) {
            this.terminalData.checked = val ? this.terminalData.options.map(item => item.type) : [];
            this.terminalData.isIndeterminate = false;
        },

        /**
         * 点击checkout图例
         * @param value
         */
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.terminalData.checkAll = checkedCount === this.terminalData.options.length;
            this.terminalData.isIndeterminate = checkedCount > 0 && checkedCount < this.terminalData.options.length;
        },

        /**
         * 地块区域选择变动
         */
        landBlockCheckHandle() {
            const markerArray = this.mapData.map.getAllOverlays('polygon');
            markerArray.forEach((polygon) => {
                const {type, comBindType, landcolor, polygonColor} = polygon.getExtData();
                if (comBindType && type === '多边形地块') {

                    const curComBindTypes = this.landBlockData.checked.reduce((acc, item) => {
                        if (this.landBlockData.valueMap[item]) {
                            return acc.concat(this.landBlockData.valueMap[item])
                        }
                        return acc;
                    }, [])

                    if (curComBindTypes.length && curComBindTypes.includes(comBindType)) {
                        polygon.setOptions({
                            fillColor: landcolor
                        })
                    } else {
                        polygon.setOptions({
                            fillColor: polygonColor
                        })
                    }
                }
            })


        },

        plantDataCheckHandle() {

        },

        /**
         * 地块名称显示隐藏
         * @param v
         */
        landNameShowChange(v) {
            const markerArray = this.mapData.map.getAllOverlays('marker');
            markerArray.forEach((marker) => {
                const {type} = marker.getExtData();
                if (type === '地块名称') {
                    v ? marker.show() : marker.hide();
                }
            })
        },

        /**
         * 初始化地图
         */
        initMap() {
            let center = [118.582869, 28.634743];
            if (MACRO_VARIABLE.CURRENTURL_PARAM("station_code") == 33) {
                center = [118.906117, 27.989001];
            }
            this.mapData.map = new AMap.Map('map-container', {
                center: center,
                labelzIndex: 150,
                disableSocket: true,
                viewMode: '2D',
                pitch: 40,
                zooms: [4, 38],
                zoom: 16.7,
                skyColor: 'rgba(0,0,0,0)',
                layers: this.curMapLayer,
                animateEnable: true,
                // layers: [
                //     new AMap.TileLayer.Satellite({
                //         zIndex: 6,
                //     }),
                // ],
                expandZoomRange: true
            });
            if (this.mapData.infoWindow) this.mapData.infoWindow.close();
            this.mapData.infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(20, -20),
                isCustom: true,
                autoMove: false,
                anchor: 'middle-left'
            })
            this.mapData.map.on('complete', () => {

            })
            this.mapData.map.on('click', (p) => {
                console.log(p)
                if (this.mapData.infoWindow) this.mapData.infoWindow.close();
            })
        },

        /**
         * 获取地块列表
         */
        async getLandsByStationId() {
            let data= [
                {
                    "acreage": 37.74,
                    "acreageUnit": 1,
                    "createTime": "2023-10-31 10:37:30",
                    "landId": 359,
                    "landName": "江山地块1",
                    "landSectionList": [
                        {
                            "landId": 359,
                            "landSectionId": 72,
                            "latitude": 28.634912,
                            "longitude": 118.582233,
                            "parentSectionId": 0,
                            "pixelsColor": "#ffffff",
                            "polygon": "118.582381,28.636334;118.583132,28.636066;118.583062,28.635736;118.581844,28.63349;118.581334,28.633608;118.581538,28.63447;118.581705,28.63511;118.581914,28.63551;",
                            "polygonColor": "rgba(22, 136, 0, 1)"
                        }
                    ],
                    "landType": 7,
                    "landZoning": 1,
                    "latitude": 0,
                    "longitude": 0,
                    "mapLayer": 2,
                    "picUrl": "https://test.agrionline.cn/sap_sl/api_server/upload/Dingtalk_202310251020151.jpg",
                    "speciesCode": "L11243",
                    "stationId": 44,
                    "stationName": "江山基地",
                    "useState": 0
                },
                {
                    "acreage": 16.56,
                    "acreageUnit": 1,
                    "createTime": "2023-10-31 10:38:56",
                    "landId": 360,
                    "landName": "江山地块2",
                    "landSectionList": [
                        {
                            "landId": 360,
                            "landSectionId": 73,
                            "latitude": 28.634453,
                            "longitude": 118.583282,
                            "parentSectionId": 0,
                            "pixelsColor": "#ffffff",
                            "polygon": "118.582713,28.634931;118.582268,28.634098;118.582735,28.633975;118.582912,28.634154;118.583062,28.634225;118.583062,28.6343;118.583523,28.634248;118.583995,28.6343;118.584017,28.634437;118.584296,28.634465;118.584269,28.634714;118.583518,28.634738;",
                            "polygonColor": "rgba(0, 255, 150, 1)"
                        }
                    ],
                    "landType": 7,
                    "landZoning": 2,
                    "latitude": 0,
                    "longitude": 0,
                    "mapLayer": 2,
                    "picUrl": "https://test.agrionline.cn/sap_sl/api_server/upload/Dingtalk_202310251019292.jpg",
                    "speciesCode": "L11129",
                    "stationId": 44,
                    "stationName": "江山基地",
                    "useState": 0
                }
            ]
            if (MACRO_VARIABLE.CURRENTURL_PARAM("station_code") == 33) {
                data= [
                    {
                        "acreage": 37.74,
                        "acreageUnit": 1,
                        "createTime": "2023-10-31 10:37:30",
                        "landId": 359,
                        "landName": "龙泉地块",
                        "landSectionList": [
                            {
                                "landId": 359,
                                "landSectionId": 72,
                                "latitude": 28.634912,
                                "longitude": 118.582233,
                                "parentSectionId": 0,
                                "pixelsColor": "#ffffff",
                                "polygon": "118.900817,27.987717;118.901643,27.989593;118.903177,27.990067;118.903724,27.989953;118.906085,27.989318;118.905784,27.988295;118.903714,27.988475;118.902662,27.98821;118.90145,27.987272",
                                "polygonColor": "rgba(22, 136, 0, 1)"
                            }
                        ],
                        "landType": 7,
                        "landZoning": 1,
                        "latitude": 0,
                        "longitude": 0,
                        "mapLayer": 2,
                        "picUrl": "https://test.agrionline.cn/sap_sl/api_server/upload/Dingtalk_202310251020151.jpg",
                        "speciesCode": "L11243",
                        "stationId": 44,
                        "stationName": "江山基地",
                        "useState": 0
                    }
                ]
            }
            this.landData.list = data;
            // 绘制地块多边形和地块名称
            for (let i = 0; i < this.landData.list.length; i++) {
                let {landName, acreage, polygon, landSectionList} = this.landData.list[i] || {};
                if (landSectionList && landSectionList.length) {
                    landSectionList.forEach(landSection => {
                        var {landSectionId, polygon, polygonColor} = landSection || {};
                        const path = tpUtils.convertStrPolygon2Path(polygon, 2, 2);

                        const polygonMarker = new AMap.Polygon({
                            strokeWeight: 2,
                            map: this.mapData.map,
                            path: path,
                            fillOpacity: 0.6,
                            fillColor: polygonColor,
                            strokeColor: "#fff",
                            zIndex: 2,
                            extData: {type: '多边形地块', polygonColor: polygonColor}
                        });

                        const {lat, lng} = polygonMarker.getBounds().getCenter() || {};
                        polygonMarker.on("click", (e) => {
                            console.log(e)
                            this.$emit("land-click", {...this.landData.list[i], ...landSection});
                        })
                        const nameMarker = new AMap.Marker({
                            map: this.mapData.map,
                            position: new AMap.LngLat(lng, lat),
                            content: `<div class="map-marker__landname" title=${landName}>
                                    <span>${landName}</span><br/>
                                    <span>${acreage}亩</span>
                                </div>`,
                            offset: new AMap.Pixel(-50, -8),
                            zIndex: 5,
                            extData: {type: '地块名称'}
                        })
                        nameMarker.on("click", () => {
                            this.$emit("land-click", {...this.landData.list[i], ...landSection});
                        })
                    })
                }
            }

            // 获取多边形图层
            const overlaysList = this.mapData.map.getAllOverlays('polygon');
        },

        /**
         * 获取终端设备列表
         */
        async getTermsByStationId() {

            // 绘制终端设备图标和设备名称
            this.terminalData.list.forEach(item => {
                const {latitude, longitude, terminalName, terminalAlias, terminalSerial, terminalType, online, terminalId} = item || {};
                const name = terminalName || terminalAlias || terminalSerial;
                let INDEX = 0;
                // 气象站
                if (TERMINAL.QXZ.includes(terminalType)) {
                    INDEX = 1;
                } else if (TERMINAL.SQ.includes(terminalType)) {
                    INDEX = 2;
                } else if (TERMINAL.JK.includes(terminalType)) {
                    INDEX = 3;
                } else if (TERMINAL.CQ.includes(terminalType)) {
                    INDEX = 4;
                } else if (TERMINAL.SCD.includes(terminalType)) {
                    INDEX = 5;
                }

                if (INDEX > 0 && INDEX != 4) {
                    const STATUS = online ? 'online' : 'offline';
                    const icon = `../../resources/img/index/${STATUS}-${INDEX}-icon.png`;

                    // 终端图标
                    const iconMarker = new AMap.Marker({
                        map: this.mapData.map,
                        position: new AMap.LngLat(longitude, latitude),
                        content: `<div class="map-marker__terminalicon"><img src=${icon} alt=""></div>`,
                        offset: new AMap.Pixel(-15, -36),
                        zIndex: 5,
                        extData: {type: '终端图标', groupType: '终端', terminalType: terminalType, icon: icon, terminalId: terminalId}
                    })
                    iconMarker.on("click", (param) => {
                        this.$emit("marker-click", item);
                    })

                    // 终端名称
                    const nameMarker = new AMap.Marker({
                        map: this.mapData.map,
                        position: new AMap.LngLat(longitude, latitude),
                        content: `<div class="map-marker__terminalname" title=${name}> ${name}</div>`,
                        offset: new AMap.Pixel(-50, 8),
                        zIndex: 5,
                        extData: {type: '终端名称', groupType: '终端', terminalType: terminalType, icon: icon}
                    })

                    iconMarker.on("click", (param) => {
                        this.setIconMarkerSelect(iconMarker, icon);
                        this.$emit("marker-click", item);
                    })

                }
            })

        },

        /*获取标记点坐标并渲染*/
        async getMarkerList() {
            let markerList = [
                {
                    longitude: 118.582649,
                    latitude: 28.635995,
                    type: 1,
                    typename: '割草机',
                    num: 'A15124',
                    skill: '拖拉机、插秧机',
                    order_status_label: '工作中',
                    task: '王家村耕地，王家村浇水',
                    time: '167小时',
                    online: true
                },
                {
                    longitude: 118.584167,
                    latitude:28.634592,
                    type: 2,
                    typename: '铲车',
                    num: 'A15124',
                    skill: '拖拉机、插秧机',
                    order_status_label: '工作中',
                    task: '王家村耕地，王家村浇水',
                    time: '120小时',
                    online: true
                },

                {
                    longitude: 118.581833,
                    latitude:  28.63422,
                    type: 3,
                    typename: '插秧机',
                    num: 'A15124',
                    skill: '拖拉机、插秧机',
                    order_status_label: '工作中',
                    task: '王家村耕地，王家村浇水',
                    time: '120小时',
                    online: true
                },

                {
                    longitude: 118.582134,
                    latitude: 28.635246,
                    type: 4,
                    typename: '作业人员',
                    name: '倪*洪',
                    num: 'A15124',
                    skill: '拖拉机、插秧机',
                    order_status_label: '工作中',
                    task: '王家村耕地，王家村浇水',
                    time: '120小时',
                    online: true
                }
            ]
            if (MACRO_VARIABLE.CURRENTURL_PARAM("station_code") == 33) {
                markerList = [
                    {
                        longitude: 118.901686,
                        latitude: 27.988362,
                        type: 4,
                        typename: '作业人员',
                        name: '倪*洪',
                        num: 'A15124',
                        skill: '拖拉机、插秧机',
                        order_status_label: '工作中',
                        task: '王家村耕地，王家村浇水',
                        time: '120小时',
                        online: true
                    },
                    {
                        longitude: 118.9034026041627,
                        latitude: 27.989337,
                        type: 3,
                        typename: '插秧机',
                        num: 'A15124',
                        skill: '拖拉机、插秧机',
                        order_status_label: '工作中',
                        task: '王家村耕地，王家村浇水',
                        time: '120小时',
                        online: true
                    }
                ]
            }

            markerList.forEach(item => {
                const {type, online, order_status, typename, longitude, latitude, order_name, order_status_label, order_progress, order_start_time, order_end_time} = item;
                const STATUS = online ? 'online' : 'offline';
                const icon = `../../resources/img/index/${STATUS}-${type}-icon.png`;
                // 终端图标
                const iconMarker = new AMap.Marker({
                    map: this.mapData.map,
                    position: new AMap.LngLat(longitude, latitude),
                    content: `<div class="map-marker__terminalicon"><img src=${icon} alt=""/> <div class="type-name">${typename}</div></div>`,
                    offset: new AMap.Pixel(-15, -36),
                    zIndex: 5,
                    extData: {type: '订单图标'}
                })

                iconMarker.on("click", (e) => {

                    let content = ''
                    if (type == 1) {
                        content = `
                        <div class="marker-info-window" style="color:#cae1ec">
                            <div class="row"><span class="label">农机名称：</span><span class="value">割草机</span></div>
                            <div class="row"><span class="label">车牌号：</span><span class="value">浙ABF1125</span></div>
                            <div class="row"><span class="label">状态：</span><span class="value">空闲</span></div>
                            <div class="row"><span class="label">使用者：</span><span class="value">无</span></div>
                            <div class="row"><span class="label">任务：</span><span class="value">无</span></div>
                            <div class="row"><span class="label">累计工时：</span><span class="value">67小时</span></div>
                            <div class="good">
                                <div class="value">95.65%</div>
                                <div class="label">好评率</div>
                            </div>
                        </div>
`
                    }

                    if (type == 2) {
                        content = `
                        <div class="marker-info-window" style="color:#cae1ec">
                            <div class="row"><span class="label">农机名称：</span><span class="value">铲车</span></div>
                            <div class="row"><span class="label">车牌号：</span><span class="value">浙ABF1124</span></div>
                            <div class="row"><span class="label">状态：</span><span class="value">工作中</span></div>
                            <div class="row"><span class="label">使用者：</span><span class="value">王*刚</span></div>
                            <div class="row"><span class="label">任务：</span><span class="value">王家村翻地</span></div>
                            <div class="row"><span class="label">累计工时：</span><span class="value">127小时</span></div>
                            <div class="good">
                                <div class="value">92.86%</div>
                                <div class="label">好评率</div>
                            </div>
                        </div>`
                    }

                    if (type == 3) {
                        content = `
                           <div class="marker-info-window" style="color:#cae1ec">
                            <div class="row"><span class="label">农机名称：</span><span class="value">插秧机</span></div>
                            <div class="row"><span class="label">车牌号：</span><span class="value">浙ABF1155</span></div>
                            <div class="row"><span class="label">状态：</span><span class="value">空闲</span></div>
                            <div class="row"><span class="label">使用者：</span><span class="value">无</span></div>
                            <div class="row"><span class="label">任务：</span><span class="value">无</span></div>
                            <div class="row"><span class="label">累计工时：</span><span class="value">267小时</span></div>
                            <div class="good">
                                <div class="value">97.11%</div>
                                <div class="label">好评率</div>
                            </div>
                        </div>`
                    }


                    if (type == 4) {
                        content = `
                        <div class="marker-info-window" style="color:#cae1ec">
                            <div class="row"><span class="label">姓名：</span><span class="value">${item.name}</span></div>
                            <div class="row"><span class="label">工号：</span><span class="value">${item.num}</span></div>
                            <div class="row"><span class="label">技能：</span><span class="value">${item.skill}</span></div>
                            <div class="row"><span class="label">任务：</span><span class="value">${item.task}</span></div>
                            <div class="row"><span class="label">累计工时：</span><span class="value">${item.time}</span></div>
                            <div class="good">
                                <div class="value">98.32%</div>
                                <div class="label">好评率</div>
                            </div>
                        </div>`
                    }


                    if (this.mapData.infoWindow) this.mapData.infoWindow.close();
                    this.mapData.infoWindow.setContent(content);
                    this.mapData.infoWindow.open(this.mapData.map, e.target.getPosition());
                })

            })
        },


        /**
         * 设置图标标记为选中状态
         * @param iconMarker
         */
        setIconMarkerSelect(iconMarker, icon) {
            if (this.selectMarker) {
                let {icon: img} = this.selectMarker.getExtData();
                this.selectMarker.setContent(`<div class="map-marker__terminalicon"><img src=${img} alt=""></div>`)
                this.selectMarker.setOffset(new AMap.Pixel(-15, -36));
            }

            if (iconMarker && icon) {
                iconMarker.setContent(`<div class="map-marker__terminalicon selected"><img src=${icon} alt=""></div>`)
                iconMarker.setOffset(new AMap.Pixel(-22.5, -54));
                this.markerzIndex += 1;
                iconMarker.setzIndex(this.markerzIndex);
                this.selectMarker = iconMarker;
            }
        },
    },

    mounted() {
        bus.$on('pan-location', item => {
            const {latitude, longitude, terminalId, device_id,} = item || {};
            if (latitude && longitude) {

                // 1.获取所有终端设备并晒出选中的终端
                const markerAll = this.mapData.map.getAllOverlays('marker');
                const targetMarker = markerAll.find(marker => {
                    const {terminalId: ter_id, device_id: dev_id, icon} = marker.getExtData();

                    if (device_id) {
                        return dev_id == device_id
                    } else if (terminalId) {
                        return ter_id == terminalId
                    } else {
                        return false;
                    }
                });

                if (targetMarker) {
                    const item = targetMarker.getExtData();
                    this.setIconMarkerSelect(targetMarker, item.icon);
                    this.mapData.map.panTo([longitude, latitude], 1500);
                }

            }
        })

        /*监控设备单独渲染*/
        bus.$on('monitor-list', list => {
            list.forEach((item, index) => {
                const icon = `../../resources/img/index/online-3-icon.png`;
                const {longitude, latitude, device_name, device_id} = item || {};

                // 终端图标
                const iconMarker = new AMap.Marker({
                    map: this.mapData.map,
                    position: new AMap.LngLat(longitude, latitude),
                    content: `<div class="map-marker__terminalicon">
                                    <img src=${icon} alt="">
                            </div>`,
                    offset: new AMap.Pixel(-15, -36),
                    zIndex: 5,
                    extData: {type: '终端图标', groupType: '终端', terminalType: 40, icon: icon, device_id: device_id}
                })

                // 终端名称
                const nameMarker = new AMap.Marker({
                    map: this.mapData.map,
                    position: new AMap.LngLat(longitude, latitude),
                    content: `<div class="map-marker__terminalname" title=${device_name}> ${device_name}</div>`,
                    offset: new AMap.Pixel(-50, 8),
                    zIndex: 5,
                    extData: {type: '终端名称', groupType: '终端', terminalType: 40, icon: icon}
                })

                iconMarker.on("click", (param) => {
                    this.setIconMarkerSelect(iconMarker, icon);
                    this.$emit("marker-click", {item, terminalType: 40});
                    this.visible = true;
                    this.item = item;
                })
            })
        })
    }
})
;
